<template>
	<div class="storage-detail">
		<el-card>
			<div class="toolbar">
				<el-input v-model="filters.keyword" placeholder="搜索物料/批次/仓库" clearable style="width:200px" />
				<el-date-picker v-model="filters.date" type="daterange" range-separator="至" start-placeholder="入库起始日期"
					end-placeholder="入库结束日期" value-format="YYYY-MM-DD" style="width:260px" />
				<el-button type="primary" @click="openDialog()">新增入库</el-button>
			</div>
			<el-table :data="filteredDetails" border size="small" style="margin-bottom:18px;">
				<el-table-column prop="entryNo" label="入库单号" width="120" />
				<el-table-column prop="orderNo" label="采购订单号" width="130" />
				<el-table-column prop="material" label="物料名称" width="130" />
				<el-table-column prop="batchNo" label="批次号" width="120" />
				<el-table-column prop="quantity" label="入库数量" width="100" />
				<el-table-column prop="warehouse" label="仓库" width="100" />
				<el-table-column prop="inDate" label="入库日期" width="110" />
				<el-table-column prop="operator" label="操作员" width="100" />
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeDetail(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialog.visible" :title="dialog.editIndex >= 0 ? '编辑入库明细' : '新增入库明细'" width="420px">
			<el-form :model="dialog.data" label-width="86px">
				<el-form-item label="入库单号">
					<el-input v-model="dialog.data.entryNo" />
				</el-form-item>
				<el-form-item label="采购订单号">
					<el-input v-model="dialog.data.orderNo" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="dialog.data.material" />
				</el-form-item>
				<el-form-item label="批次号">
					<el-input v-model="dialog.data.batchNo" />
				</el-form-item>
				<el-form-item label="入库数量">
					<el-input-number v-model="dialog.data.quantity" :min="1" />
				</el-form-item>
				<el-form-item label="仓库">
					<el-input v-model="dialog.data.warehouse" />
				</el-form-item>
				<el-form-item label="入库日期">
					<el-date-picker v-model="dialog.data.inDate" type="date" value-format="YYYY-MM-DD"
						placeholder="选择日期" />
				</el-form-item>
				<el-form-item label="操作员">
					<el-input v-model="dialog.data.operator" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dialog.data.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveDetail">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 入库明细模拟数据
const details = ref([
	{ entryNo: 'IN-20240601', orderNo: 'PO-20240601', material: '头孢曲松钠原料', batchNo: 'B2024060101', quantity: 40, warehouse: '原料库A', inDate: '2024-06-02', operator: '张三', remark: '' },
	{ entryNo: 'IN-20240602', orderNo: 'PO-20240603', material: '玻璃安瓿', batchNo: 'B2024060301', quantity: 200, warehouse: '辅料库', inDate: '2024-06-04', operator: '李四', remark: '' },
	{ entryNo: 'IN-20240603', orderNo: 'PO-20240604', material: '硫酸镁', batchNo: 'B2024060401', quantity: 15, warehouse: '原料库B', inDate: '2024-06-05', operator: '王五', remark: '紧急入库' },
	{ entryNo: 'IN-20240604', orderNo: 'PO-20240605', material: '铝箔', batchNo: 'B2024060501', quantity: 60, warehouse: '包材库', inDate: '2024-06-06', operator: '赵六', remark: '' },
	{ entryNo: 'IN-20240605', orderNo: 'PO-20240607', material: '阿司匹林片', batchNo: 'B2024060701', quantity: 60, warehouse: '成品库', inDate: '2024-06-08', operator: '张三', remark: '合格入库' },
	{ entryNo: 'IN-20240606', orderNo: 'PO-20240609', material: '聚乙烯薄膜', batchNo: 'B2024060901', quantity: 40, warehouse: '包材库', inDate: '2024-06-10', operator: '李四', remark: '' },
	{ entryNo: 'IN-20240607', orderNo: 'PO-20240611', material: '乳糖', batchNo: 'B2024061101', quantity: 36, warehouse: '原料库A', inDate: '2024-06-12', operator: '王五', remark: '' },
	{ entryNo: 'IN-20240608', orderNo: 'PO-20240612', material: '乙醇', batchNo: 'B2024061201', quantity: 25, warehouse: '辅料库', inDate: '2024-06-13', operator: '赵六', remark: '' },
	{ entryNo: 'IN-20240609', orderNo: 'PO-20240613', material: '瓶盖', batchNo: 'B2024061301', quantity: 10, warehouse: '包材库', inDate: '2024-06-14', operator: '张三', remark: '入库审核' },
	{ entryNo: 'IN-20240610', orderNo: 'PO-20240614', material: '铝塑泡罩板', batchNo: 'B2024061401', quantity: 36, warehouse: '包材库', inDate: '2024-06-15', operator: '李四', remark: '' },
	{ entryNo: 'IN-20240611', orderNo: 'PO-20240602', material: '阿莫西林原粉', batchNo: 'B2024060201', quantity: 40, warehouse: '原料库B', inDate: '2024-06-16', operator: '王五', remark: '' },
	{ entryNo: 'IN-20240612', orderNo: 'PO-20240608', material: '包装彩盒', batchNo: 'B2024060801', quantity: 90, warehouse: '包材库', inDate: '2024-06-17', operator: '赵六', remark: '' },
	{ entryNo: 'IN-20240613', orderNo: 'PO-20240615', material: '维生素C原粉', batchNo: 'B2024061501', quantity: 85, warehouse: '原料库A', inDate: '2024-06-18', operator: '张三', remark: '' },
	{ entryNo: 'IN-20240614', orderNo: 'PO-20240610', material: '碳酸钙', batchNo: 'B2024061001', quantity: 45, warehouse: '原料库B', inDate: '2024-06-19', operator: '李四', remark: '' },
	{ entryNo: 'IN-20240615', orderNo: 'PO-20240606', material: '葡萄糖', batchNo: 'B2024060601', quantity: 25, warehouse: '原料库A', inDate: '2024-06-20', operator: '王五', remark: '' }
])

const filters = ref({ keyword: '', date: [] })

const filteredDetails = computed(() => {
	return details.value.filter(d =>
		(!filters.value.keyword ||
			d.material.includes(filters.value.keyword) ||
			d.batchNo.includes(filters.value.keyword) ||
			d.warehouse.includes(filters.value.keyword)
		) &&
		(
			!filters.value.date.length ||
			(d.inDate >= filters.value.date[0] && d.inDate <= filters.value.date[1])
		)
	)
})

// 新增/编辑弹窗
const dialog = reactive({
	visible: false,
	data: { entryNo: '', orderNo: '', material: '', batchNo: '', quantity: 1, warehouse: '', inDate: '', operator: '', remark: '' },
	editIndex: -1
})

function openDialog(row) {
	if (row) {
		dialog.data = { ...row }
		dialog.editIndex = details.value.findIndex(d => d.entryNo === row.entryNo)
	} else {
		dialog.data = { entryNo: '', orderNo: '', material: '', batchNo: '', quantity: 1, warehouse: '', inDate: '', operator: '', remark: '' }
		dialog.editIndex = -1
	}
	dialog.visible = true
}

function saveDetail() {
	if (dialog.editIndex >= 0) {
		details.value[dialog.editIndex] = { ...dialog.data }
	} else {
		details.value.unshift({ ...dialog.data })
	}
	dialog.visible = false
}

function removeDetail(idx) {
	details.value.splice(idx, 1)
}
</script>

<style scoped>
.storage-detail {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
</style>
  
